<template>
  <!--
  <el-button-group>
    <el-button type="primary" size="small" @click="$emit('数量减少')">-</el-button>
    <el-button size="small">{{ amount }}</el-button>
    <el-button type="primary" size="small" @click="$emit('数量增加')">+</el-button>
  </el-button-group>
  -->
  <!-- 将当前组件的 count 属性值显示到输入框中 -->
  <el-input type="text" v-model.lazy.number.trim="count" 
            :input-style="{ textAlign: 'center' }"
            @change="gaibian">
    <!-- 通过 `prepend` 插槽分发输入框前置内容 -->
    <template #prepend>
      <!-- 注意 @之后的 click 是事件名称，=之后的 jianshao 是函数名 -->
      <el-button @click="jianshao">-</el-button>
    </template>
    <template #append>
      <el-button @click="zengjia">+</el-button>
    </template>
  </el-input>
</template>

<script>
export default {
    name: 'AmountView',
    props: {
        // 通过 props 从父组件接受的数据都是只读的(readonly)
        amount: {
            type: Number,
            required: true
        }
    },
    data(){
      return { 
        // 将从父组件接受到的 amount 赋值给自己的 count 属性
        count: this.amount 
      }
    },
    methods: {
      jianshao(){
        if( this.count <= 1 ) {
          console.log('仅剩单个商品，不能再减少了');
          return;
        }
        this.$emit('数量减少');
        this.count--;
      },
      zengjia(){
        this.$emit('数量增加');
        this.count++;
      },
      gaibian(){
        if( this.count <= 0 ) {
          console.log(`非法数值：${this.count}`);
          this.count = this.amount;
          return;
        }
        // 触发名称为 `数量更改` 的自定义事件，并将更改后的新数量传递过去
        this.$emit('数量更改' , this.count );
      }
    },
    /* 可以使用 watcher 来侦听 count 属性的变化 
    watch: {
      // 侦听 count 属性的变化
      count: {
        handler(newValue,oldValue){
          console.log(`数量从${oldValue}更改为${newValue}`);
          // 触发名称为 `数量更改` 的自定义事件，并将更改后的新数量传递过去
          this.$emit('数量更改' , newValue );
        },
        immediate: false
      }
    }
    */
}
</script>

<style>

</style>